<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <el-row :gutter="20" class="btn">
              <el-col :span="5" class="btn1">
                <el-form-item label="标签名称：" prop="tags">
                  <el-input
                    @keyup.enter="handleFilter"
                    style="width: 180px;"
                    placeholder="请输入"
                    class="filter-item"
                    v-model="requestParameters.tags"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" class="btn1">
                <el-form-item label="城市：" prop="province">
                  <el-select
                    class="filter-item"
                    style="width: 200px;"
                    v-model="requestParameters.province"
                    @keyup.enter="handleFilter"
                    @change="handleProvince"
                    filterable
                  >
                    <el-option
                      v-for="item in citySelect.province"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" class="btn1">
                <el-form-item label="地区：" prop="city">
                  <el-select
                    class="filter-item"
                    style="width: 180px;"
                    v-model="requestParameters.city"
                    @keyup.enter="handleFilter"
                    filterable
                  >
                    <el-option
                      v-for="item in citySelect.cityDate"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" class="btn1">
                <el-form-item label="企业简称：" prop="shortName">
                  <el-input
                    v-model="requestParameters.shortName"
                    style="width: 180px;"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div>
              <el-col :span="6" class="btn5">
                <el-form-item label="状态：" prop="state">
                  <el-select
                    class="filter-item"
                    style="width: 180px;"
                    v-model="requestParameters.state"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="" class="btn3">
                  <el-button
                    class="filter-item btn4"
                    size="small"
                    @click="resetForm"
                    >清除</el-button
                  >
                  <el-button size="small" type="primary" @click="handleFilter"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
              <el-button
                class="filter-item-m fr"
                size="small"
                style="margin-left: 10px;"
                @click="handleChange('add')"
                type="success"
                icon="el-icon-edit"
                >新增用户</el-button
              >
            </div>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="企业编号">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="企业简称">
            <template slot-scope="scope">
              <span>{{ scope.row.shortName }}</span>
            </template>
          </el-table-column>
          <br />
          <el-table-column label="标签">
            <template slot-scope="scope">
              <span>{{ scope.row.tags }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建者">
            <template slot-scope="scope">
              <span>{{ scope.row.creatorID }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              <span>{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                plain
                @click="handleChange(scope.row.id)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                plain
                @click="handleStatus(scope.row)"
                v-if="scope.row.state == 0"
              >
              </el-button>
              <el-button
                v-else
                type="warning"
                icon="el-icon-close"
                circle
                plain
                @click="handleStatus(scope.row)"
              >
              </el-button>
              <el-button
                v-if="scope.row.status != 'deleted'"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="removeUser(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <Dialog
          ref="editUser"
          :titleInfo="titleInfo"
          :formBase="formData"
          v-on:newDataes="getList"
        ></Dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from "@/api/hmmm/constants";
import { list, remove, detail, disabled } from "@/api/hmmm/companys";
import { provinces, citys } from "@/api/hmmm/citys.js";
import Dialog from "./../components/companys-add";
export default {
  name: "CompanysList",
  components: {
    Dialog
  },
  data() {
    return {
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      alertText: "",
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      titleInfo: {
        pageTitle: "用户", // 页面标题
        text: "" // 新增、编辑文本
      },
      formData: {
        isFamous: "",
        shortName: "",
        company: "",
        province: "",
        city: "",
        tags: "",
        remarks: ""
      },
      citySelect: {
        province: [],
        cityDate: []
      }
    };
  },
  computed: {
    status() {
      return status;
    }
  },
  methods: {
    // 初始数据
    initialDate() {
      // 读取数据
      this.getList();
    },
    // 获取列表数据
    async getList(params) {
      this.listLoading = true;
      const { data: res } = await list(this.requestParameters);
      // 获取数据给dataList
      this.dataList = res.items;
      // 获取总条数
      this.total = res.counts;
      this.alertText = `共 ${this.total} 条记录`;
      this.listLoading = false;
    },
    // 重置
    resetForm() {
      this.$refs.requestParameters.resetFields();
    },
    // 搜索信息
    handleFilter() {
      this.requestParameters.page = 1;
      this.getList(this.requestParameters);
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val;
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters);
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val;
      this.getList();
    },

    // **********************************
    // 搜索的项目
    // 添加、编辑之后表单清空
    query() {
      this.formData = {};
    },
    // 新增用户、编辑用户
    handleChange(id) {
      this.query();
      this.$refs.editUser.dialogFormV();
      if (id === "add") {
        this.titleInfo.text = "创建"; // 给弹层传参
      } else {
        this.titleInfo.text = "编辑"; // 给弹层传参
        this.hanldeEditForm(id);
      }
    },
    // 窗口操作**********************************
    // 编辑
    // 表单详情数据加载
    async hanldeEditForm(objeditId) {
      this.formData.id = objeditId;
      const { data: res } = await detail({ id: objeditId });
      // 获取详情 给formData
      this.formData = res;
    },
    // 删除
    removeUser(user) {
      this.$confirm("此操作将永久删除用户 " + ", 是否继续?", "提示", {
        type: "warning"
      })
        .then(async () => {
          await remove({ id: user })
            .then(response => {
              this.$message.success("成功删除了用户" + "!");
              this.dataList.splice(user, 1);
              this.getList(this.requestParameters);
            })
            .catch(response => {
              this.$message.error("删除失败!");
            });
        })
        .catch(() => {
          this.$message.info("已取消操作!");
        });
    },
    // 启用、禁用
    handleStatus(val) {
      var status = "";
      if (val.state === true) {
        val.state = 0;
        status = "禁用";
      } else {
        val.state = 1;
        status = "启用";
      }
      var data = {
        id: val.id,
        state: val.state
      };
      this.$confirm("已成功" + status + ", 是否继续?", "提示", {
        type: "warning"
      })
        .then(async () => {
          await disabled(data)
            .then(response => {
              this.$message.success("已成功" + status + "!");
              this.getList(this.requestParameters);
            })
            .catch(response => {
              this.$message.error(status + "失败!");
            });
        })
        .catch(() => {
          this.$message.info("已取消操作!");
        });
    },
    // 获取省
    getCityData: function() {
      this.citySelect.province = provinces();
    },
    // 选省获取到市
    handleProvince: function(e) {
      this.citySelect.cityDate = citys(e);
      this.requestParameters.city = this.citySelect.cityDate[0];
    }
  },
  // 挂载结束
  mounted: function() {},
  // 创建完毕状态
  created() {
    var _this = this;
    this.initialDate();
    this.getCityData();
    // 键盘enter操作
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      if (key === 13) {
        _this.handleFilter(this.requestParameters);
      }
    };
  },
  // 组件更新
  updated: function() {}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.btn {
  display: flex;
}
.btn1 {
  flex: 1;
}
.btn3 {
  width: 300px;
}
.btn4 {
  margin-bottom: 0;
}
.btn5 {
  margin-left: 26px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
